<template>
  <div class="navbar">
    <el-header class="navbar">
      <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
            <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
              item.meta.title }}</span>
            <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>

      <el-button type="text" class="toggle-button" @click="toggleCollapse">
        <el-icon style="font-size: 20px; margin-top:-13px;color:black;">
          <Fold />
        </el-icon>
      </el-button>

      <el-dropdown style="position:absolute; right:0;left:1130px; margin-top:2px;">
        <span class="el-dropdown-link">
          <img src="@/assets/images/outTop.jpg" style="width: 36px;height: 36px;border-radius: 100%;">
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElBreadcrumb, ElBreadcrumbItem, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from 'element-plus';
import { Fold, ArrowDown } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();
const isCollapse = ref(false);
const levelList = ref([]);

function getBreadcrumb() {
  // only show routes with meta.title
  let matched = route.matched.filter(item => item.meta && item.meta.title);
  const first = matched[0];

  if (!isDashboard(first)) {
    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
  }

  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false);
}

function isDashboard(route) {
  const name = route && route.name;
  if (!name) {
    return false;
  }
  return name.trim().toLowerCase() === 'index';
}

function handleLink(item) {
  const { redirect, path } = item;
  if (redirect) {
    router.push(redirect);
    return;
  }
  router.push(path);
}

function toggleCollapse() {
  isCollapse.value = !isCollapse.value;
}

function logout() {
  // 实现退出登录逻辑
  console.log('退出登录');
}

watchEffect(() => {
  // if you go to the redirect page, do not update the breadcrumbs
  if (route.path.startsWith('/redirect/')) {
    return;
  }
  getBreadcrumb();
});

getBreadcrumb(); // 初始化时获取面包屑数据
</script>

<style lang='scss' scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}

.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  .toggle-button {
    line-height: 46px;
    font-size: 19px;
    width: 50px;
    text-align: center;
    border: none;
    background: #f5f7fa;
    cursor: pointer;
  }

  .el-dropdown {
    float: right;
  }
}
</style>